import React, {useState, useEffect} from 'react'
import NavBar from '@components/NavBar'
import './index.less'

const Shopping = (props) => {
  useEffect(() => {
  }, [])

  const { listGoods } = props.state

  return (
    <>
      <div className="shopping">
        <NavBar title="商品列表" />
        <div className="main">
          <div className="list">
            {
              listGoods.map(item => (
                <div className="item" onClick={() => props.navigate(`/order/confirm?id=${item.id}`)}>
                  <div className="item-cover" style={{background: `url('https://www.nanaplay.net/pic/${item.picName}') no-repeat`, backgroundSize: '100% auto'}}></div>
                  <div className="item-title">{item.name}</div>
                  <div className="item-detail">{item.detail}</div>
                  <div className="item-price">${item.amount}</div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    </>
  )
}

export default Shopping;